<template>
    <div>
        <div class="dahezi">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item >🏠</el-breadcrumb-item>
                <el-breadcrumb-item>糖尿病饮食</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="hezi">
                <div class="hezi2">
                <div class="hezi3">

            <div class="aaa">
                <!--                  内容-->
                <div class="aaaaa" v-for="(p,index) in yinshilist" :key="index">
                    <!--            帖子标题-->
                    <!--                一条帖子的框框，从这里开始v-for遍历-->
                    <div class="aaaaaaa"  >
                        <div v-html="p.introduce"/>
                    </div>

                </div>
                <el-row style="font-size: 30px ;margin-top: 100px">
                    <!--     分页     -->
                    <el-pagination
                            v-show="total>0"
                            :page-size="pageSize"
                            :pager-count="11"
                            :current-page.sync="pageNum"
                            :total="total"
                            @current-change="getyinshi"
                    >
                    </el-pagination>

                </el-row>

            </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "yinshi",
        data () {
            return {
                yinshilist:[],
                pageSize: 10,
                pageNum: 1,
                total: 0,
            }
        },
        created() {
            this.getyinshi();
        },
        methods: {
            //一上来请求数据
            async getyinshi() {
                const {data: jieguo} = await this.$http.get("/food/list")
                this.yinshilist = jieguo.data.data;
                this.total = jieguo.data.total;
            },
        },

        mounted() {
            /**
             * iframe-宽高自适应显示
             */
            function changeMobsfIframe() {
                const mobsf = document.getElementById('mobsf');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                mobsf.style.width = (Number(deviceWidth) - 240) + 'px'; //数字是页面布局宽度差值
                mobsf.style.height = (Number(deviceHeight) - 64) + 'px'; //数字是页面布局高度差
            }

            changeMobsfIframe()

            window.onresize = function () {
                changeMobsfIframe()
            }
        }
    }
</script>



<style scoped>
    .hezi{
        width: 80%;
        min-height: 900px;
        height: auto!important;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .hezi2{
        width: 100%;
        background-color: white;
        min-height: 850px;
        height: auto!important;
        margin-top: 3px;
        display: flex;
    }
    .hezi3{
        width: 100%;
    }

    .dahezi{
        padding-top: 3px;
        background-color: #fffacd;
        min-height: 1000px;
        height: auto!important;
    }
    /*.dahezi{*/
    /*    margin-top: 7px;*/
    /*    !*height: 2700px;*!*/
    /*    background-color: #fffacd;*/
    /*    overflow: scroll;*/

    /*}*/
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        min-height: 550px;
        height: auto!important;
        width: 100%;

    }
    .yierhang{
        width: 800px;
        height: 100px;
        text-align: center;
        margin-left: 200px;
        margin-top: 20px;
        background: #FFFFE0;
        border: #FFFACD solid 2px;
    }
    .aaaaa{
        min-height: 200px;
        height: auto!important;
        width: 100%;
        margin-bottom:25px;
    }
    .aaaaaaa{
        border: #FFFACD solid 2px;
        background: #FFFFE0;
        margin-top: 20px;
        margin-left: 12%;
        width: 76%;
        color: #111111;
        min-height: 100px;
        height: auto!important;
    }


</style>
